<!--总览卡片-->
<template>
  <div class="py-12px">
    <div class="px-12px rounded-2px font-din bg-custom-gradient text-#1E2226 letter-spacing-0">
      <div class="flex items-center justify-center py-16px">
        <div class="flex items-center font-500 text-16px leading-22px" @click="$router.push('/workOrder')">
          工单总数&nbsp;<span class="font-700 text-18px ">{{data.total}}</span>&nbsp;件<van-icon size="10px" name="play" />
        </div>
      </div>
      <div class="flex justify-between items-center pb-8px">
        <div class="box-border flex items-center justify-center flex-col w-30%">
          <div class="text-#54565C leading-20px text-14px">已处置</div>
          <p class="font-700 text-18px leading-22px my-0">{{data.handled}}<span class="font-500 text-12px">&nbsp;件</span></p>
        </div>
        <div class="box-border flex items-center  justify-center flex-col w-30% border-l-solid border-l-1 border-l-#EEEFF2">
          <div class="text-#54565C leading-20px text-14px">正在处置</div>
          <p class="font-700 text-18px leading-22px my-0">{{data.distributing}}<span class="font-500 text-12px">&nbsp;件</span></p>
        </div>
        <div class="box-border flex items-center  justify-center flex-col w-30% border-l-solid border-l-1 border-l-#EEEFF2">
          <div class="text-#54565C leading-20px text-14px">已超时</div>
          <p class="font-700 text-18px leading-22px my-0">{{data.feedbacking}}<span class="font-500 text-12px">&nbsp;件</span></p>
        </div>
      </div>
      <div class="flex flex-wrap justify-between pt-8px box-border border-t-1 border-t-solid border-t-#EEEFF2">
        <div class="box-border flex items-center  justify-center flex-col w-50%">
          <div class="text-#54565C leading-20px text-14px">重大敏感舆情</div>
          <p class="font-700 text-18px leading-22px my-0">{{data.feedbacked}}<span class="font-500 text-12px">&nbsp;件</span></p>
        </div>
        <div class="box-border flex items-center  justify-center flex-col w-50% border-l-solid border-l-1 border-l-#EEEFF2">
          <div class="text-#54565C leading-20px text-14px">重要敏感舆情</div>
          <p class="font-700 text-18px leading-22px my-0">{{data.audited}}<span class="font-500 text-12px">&nbsp;件</span></p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue'
// 定义 props
const { data } = defineProps({
  data: {
    type: Object,
    required: true
  }
})
</script>

<style scoped></style>
